<template>
	<div class="myselfaccount">
	<div class="header">
		<div class="back">
			<i class="el-icon-erp-shangyiye backicon" @click="goback"></i>
			<p class="accountinformation">账户信息</p>
			<p class="detailed" @click="goNext">明细</p>
		</div>
		<div class="body">
			<div class="box">
				<div class="pricetitle">
					<p class="total">帐号金额(元)</p>
					<p class="use">冻结金额(元)</p>
<!--					<p class="put">可提现(元)</p>-->
				</div>
				<div class="showprice">
					<p class="totalDeposit">{{totalDeposit}}</p>
					<p class="usableDeposit">{{freezeDeposit}}</p>
<!--					<p>{{totalDeposit}}</p>-->
				</div>
			</div>
		</div>
	</div>
	<div class="operation">
		<div class="option" v-for="item in list" @click="reflect(item.status)">
			<i :class="item.icon" :style="{color:item.color}"></i>
			<p>{{item.title}}</p>
			<i :class="item.icon2"></i>
		</div>
	</div>
</div>
</template>

<script>

export default {
	data() {
		return {
            totalDeposit:0,
            freezeDeposit:0,
            isShow:false,
            list:[
               {
               	icon:'el-icon-erp-chongzhi',
               	icon2:'el-icon-erp-gengduo more',
                title:'充值',
                color:'#796FFF',
                status:1
               },
               {
               	icon:'el-icon-erp-tixian',
               	icon2:'el-icon-erp-gengduo more',
               	title:'提现',
               	color:'#EE7600',
               	status:2
               }
          
            ]
		}
	},
	mounted() {
       this.getAccount()
	},
	methods: {
		//获取账户信息
		getAccount() {
			this.$http.get(this.$store.state.reqUrl + '/customer/account/account', {}).then(res => {
				if(res.status == 200) {
					this.totalDeposit = res.data.totalDeposit;
					this.freezeDeposit = res.data.freezeDeposit;
				}
			})
		},
		//返回
		goback() {
			this.$router.go(-1)
		},
		//账单明细
		goNext () {
			this.$router.push('/accountbill')
		},
		//充值  提现
		reflect(status) {
			this.$router.push({
				path:'/deposit',
				query:{
					status:status,
					price:this.totalDeposit
				}
		    })
		}
	}
}
</script>

<style lang="less" scoped>
    .myselfaccount {
    	width: 100%;
    	font-size: 28px;
    	.header {
    		background: #000000;
    		opacity: 0.8;
    		.back {    		
    			width:100%;
    			position: fixed;
    			top: 0;
    			left: 0;	
    			height: 80px;
    			display: flex;
    			.backicon {
    				width: 80px;
    				line-height: 80px;
    				color: #FFFFFF;
    				/*text-align: center;*/
    				font-size: 40px;
    				font-weight: 700;
    			}
    			.accountinformation {
    				flex: 1;
    				line-height: 80px;
    				font-size: 32px;
    				color: #FFFFFF;
    			}
    			.detailed {
    				width: 120px;
    				text-align: center;
    				font-size: 32px;
    				color: #FFFFFF;
    				line-height: 80px;
    			}
    		}
    		.body {
    			padding-top: 140px;
    			padding-bottom: 40px;
    			overflow: hidden;
    			.box {
    				padding:0 30px;
    				.pricetitle{
    					display: flex;
    					p{
    						flex: 1;
    						color: grey;
    						font-size: 26px;
    						text-align: center;
    					}
    				}
    				.showprice{
    					padding:100px 0 40px 0;
    					display: flex;
    				}
    				p{
    					flex: 1;
    					color: #FFFFFF;
    					font-size: 54px;
    					text-align: center;
    				}
    			}
    			.lookdetails {
    				float: right;
    				height: 75px;
    				width: 200px;
    				background: #66CDAA;
    				color: #FFFFFF;
    				text-align: center;
    				margin-right: 30px;
    				margin-bottom: 30px;
    				line-height: 80px;
    			}
    			.reflect {
    				float: right;
    				margin-right: 40px;
    				float: right;
    				height: 75px;
    				width: 200px;
    				background: #F47920;
    				color: #FFFFFF;
    				text-align: center;
    				margin-right: 30px;
    				margin-bottom: 30px;
    				line-height: 80px;
    			}
    		}
    	}
    	.operation{
    		width:100%;
    		.option{
    			display: flex;
    			padding:0 30px;
    			height: 80px;
    			background: #FFFFFF;
    			border-bottom: 1px solid gainsboro;
    			line-height: 80px;
    			i{
    				width:80px;
    				line-height: 80px;
    				text-align: center;
    				font-size: 50px;
    			}
    			p{
    				flex: 1;
    				font-size: 32px;
    				color: #000000;
    				line-height: 80px;
    				
    			}
    			.more{
    				font-size: 28px;
    				font-weight: 800;
    			    color: gray;
    			    width:40px;
    			    text-align: center;
    			    line-height: 80px;		
    			}
    		}
    	}
    }
</style>